<template>
  <el-container style="width: 100%" v-show="showMain">
    <el-header>
      <div style="width: 100%">
        <el-form :inline="true">
          <el-form-item>
            <!-- slot="prepend" -->
            <el-select v-model="search.state" placeholder="请选择" class="query-select">
              <el-option label="全部" value="-1"></el-option>
              <el-option label="处理中" value="0"></el-option>
              <el-option label="已完成" value="1"></el-option>
              <el-option label="失败" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-header>
    <el-header>
      <div class="left-panel">
        <el-dropdown @command="uploadHandler">
          <el-button type="primary">
            上传文件<el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="file">上传文件</el-dropdown-item>
              <el-dropdown-item command="web">上传网页</el-dropdown-item>
              <el-dropdown-item command="data">上传数据</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" tableName="listCustomColumn" :auto-start="false" :apiObj="apiObj" :params="search" :column="column" row-key="id" stripe>
        <!-- 状态 -->
        <template #stateoperator="scope">
          <el-tag class="tag-click" :key="scope.row.id" :type="scope.row.state == 0 ? 'info' : scope.row.state == 2 ? 'danger' : 'success'" effect="dark" round>
            {{ scope.row.state == 0 ? '处理中' : scope.row.state == 2 ? '失败' : '已完成' }}
          </el-tag>
        </template>
        <template #operator="scope">
          <el-button-group>
            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">详情</el-button>
            <el-button text type="primary" size="small" @click="table_retry(scope.row, scope.$index)">重试</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
              <template #reference>
                <el-button text type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </el-button-group>
        </template>
      </scTable>
    </el-main>
  </el-container>
  <knowledgeDetailVector v-if="knowledgeDetailVector.save" ref="knowledgeDetailVector" @closed="knowledgeDetailVector.save = false" />
</template>

<script>
import { ArrowDown } from '@element-plus/icons-vue';
import knowledgeDetailVector from './knowledgeDetailVector';
export default {
  name: 'AIKnowledgenDetailManage',
  components: {
    ArrowDown,
    knowledgeDetailVector,
  },
  props: {
    wikiId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      showMain: true,
      isSaveing: false,
      currentId: '',
      search: {
        state: '-1',
        wikiId: '',
      },
      apiObj: this.$API.aiWiki.knowledgePageList,

      column: [
        {
          label: '文件名',
          prop: 'fileName',
          width: '',
        },
        {
          label: '索引数量',
          prop: 'dataCount',
          width: '100',
        },
        {
          label: '数据类型',
          prop: 'type',
          width: '100',
        },
        {
          label: '数据状态',
          prop: 'stateoperator',
          width: '150',
        },
        {
          label: '备注',
          prop: 'remark',
          width: '250',
          showOverflowTooltip: true,
        },
        {
          label: '创建时间',
          prop: 'creationTime',
          width: '150',
        },
        {
          label: '操作',
          prop: 'operator',
          width: '170',
          fixed: 'right',
          align: 'right',
        },
      ],

      form: {
        wikiId: '',
      },
      knowledgeDetailVector: {
        dialog: false,
      },
    };
  },
  async mounted() {},
  methods: {
    uploadBack() {
      this.showMain = true;
    },
    setWiki(id) {
      this.$nextTick(() => {
        this.search.wikiId = id;
        this.$refs.table.upData(this.search);
      });
    },
    upsearch() {
      this.$refs.table.upData(this.search);
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          this.isSaveing = true;
          var res = await this.$API.aiWiki.update.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit('success');
            this.visible = false;
            this.$message.success('操作成功');
          } else {
            this.$alert(res.message, '提示', { type: 'error' });
          }
        }
      });
    },
    /**
     * 详情展示
     * @param row 数据
     */
    table_show(row) {
      this.knowledgeDetailVector.save = true;
      this.$nextTick(() => {
        this.$refs.knowledgeDetailVector.open('edit').setData(row);
      });
    },
    /**
     * 重试
     * @param row 数据
     */
    async table_retry(row) {
      var res = await this.$API.aiWiki.knowledgeVectorRetry.get(row.id);
      if (res.code == 200) {
        this.$emit('success');
        this.visible = false;
        this.$message.success('操作成功');
        this.upsearch();
        this.upsearch();
      } else {
        this.$alert(res.message, '提示', { type: 'error' });
      }
    },
    /**
     * 删除
     * @param row 数据
     */
    async table_del(row) {
      var res = await this.$API.aiWiki.knowledgeRemove.get(row.id);
      if (res.code == 200) {
        this.$emit('success');
        this.visible = false;
        this.$message.success('操作成功');
        this.upsearch();
      } else {
        this.$alert(res.message, '提示', { type: 'error' });
      }
    },
    uploadHandler(val) {
      this.$emit('upload', val);
    },
  },
};
</script>
<style>
</style>
